<template>
  <!-- 选择员工 -->
  <div class="orgStructure-page">
    <Form :model="formSearch" ref="deptForm" :label-width="80">
      <template>
        <!-- 搜索区域 -->
        <SelfAdaption>
          <Form :model="formSearch" ref="deptForm" slot="adaption-bar" inline>
            <Form-item :label="$t('module.userManage.employeeNo')">
              <Input
                type="text"
                
                v-model.trim="formSearch.employeeNo"
                :maxlength="30"
                :placeholder="$t('module.userManage.placeholder.enterEmployeeNo')"
                @on-enter="search"
              ></Input>
            </Form-item>

            <Form-item :label="$t('module.userManage.employeeName')">
              <Input
                type="text"
                
                v-model.trim="formSearch.employeeName"
                :maxlength="30"
                :placeholder="$t('module.userManage.placeholder.enterEmployeeName')"
                @on-enter="search"
              ></Input>
            </Form-item>

            <!-- 查询\重置按钮 -->
            <Form-item prop="button" class="search-solt-btn">
              <RPButton optType="search" @click="search" />
              <RPButton optType="reset" @click="formReset" />
            </Form-item>
          </Form>
        </SelfAdaption>
        <Row :gutter="32">
          <Col span="24">
            <InnerPageTable ref="userTable" :config="pageTableConfig"></InnerPageTable>
          </Col>
        </Row>
      </template>
    </Form>
  </div>
</template>

<script>
import locales from "./locales.js";
import userManageAPI from "@/api/userManageApi";
import { CoreModuleName } from "@/const";
import { employeeColomns } from "./colomns.js";

export default {
  mixins: [locales],
  components: {},
  props: {
    orgId: {
      type: String,
      default() {
        return "";
      }
    },
    orgCode: {
      type: String,
      default() {
        return "";
      }
    },
    orgName: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      currentUserInfo: {}, //当前登录用户信息
      formOrg: {
        nameOrCode: "",
        id: ""
      },
      formSearch: {
        employeeNo: "",
        employeeName: "",
        orgName: this.orgName,
        orgId: this.orgId,
        orgCode: this.orgCode
      },
      tableData: [],
      actions: [
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {
    pageTableConfig() {
      return {
        loadDataFn: this.getEmployeeList,
        columnsFn: employeeColomns.bind(this),
        autoFirst: false,
        rowClickHandle: this.onRowClick,
        highlightRow: true,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  created() {
    // 当前登录用户
    const RIPPLES = "ripples";
    this.currentUserInfo = $store.state[CoreModuleName].userInfo;
    this.formOrg.id = this.currentUserInfo.id;
    this.init();
  },
  mounted() {
    this.search();
  },
  methods: {
    // 获取员工列表
    getEmployeeList({ responseProcess, param }) {
      userManageAPI.getEmployee(param).then(data => {
        responseProcess(data);
      });
    },
    // 自定义行样式
    rowClassName(row) {
      if (row.enabled == 0) {
        return "tableDisableStyle";
      }
    },
    onRowClick(row) {
      this.$emit("Close", row);
    },
    init() {
      this.$emit("SetTitle", this.$t("module.userManage.associatedEmployees"));
      this.$emit("SetPageWidth", 734);
      this.$emit("SetPageActions", this.actions);
    },
    // 搜索
    search() {
      this.$refs["userTable"].load(this.formSearch);
    },
    formReset() {
      this.$refs["deptForm"].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.orgStructure-page {
  .ivu-row {
    .ivu-col {
      min-width: auto;
      .orgsearch {
        line-height: 48px;
      }
    }
  }
}
</style>